ViewPager2 是之前更新釋出的，使用的感覺其實跟 recycler view 非常類似，所以只要熟悉 recycler view，相信 view pager 會很好上手。

這裡就跟 recycler view 一樣，快速做一個簡單的範例做介紹和分享。

可以通過左右滑動改變頁數，總共有五頁。

一樣，首先先在 build.grale(Module: app) 的 dependencies 中加入

// view pager 2
implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation 'com.google.android.material:material:1.3.0-alpha02'

我現在用的是這個版本，若有更新可換

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewPagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pagerMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

把 view pager 2 直接放入 layout 裡面，取個 id 和調整大小即可

Adapter

跟 recycler view 一樣，要顯示裡面的資料，就要有一個 adapter。
可用於 view pager 2 的 Adapter 分為兩個

• 使用 RecyclerView.Adapter
• 使用 FragmentStateAdapter

view pager 2 不同於 view pager 的是，view pager 2 可以直接使用 recycler view 的 adapter。除此之外，還有一個專用於切換顯示 fragment 的 adapter。在使用上，我比較常採用第二個。

在這邊就以 FragmentStateAdapter 做示範

建立一個 class，並繼承於 FragmentStateAdapter() 跟實作他的方法

class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
    override fun getItemCount(): Int {
        TODO("Not yet implemented")
    }

    override fun createFragment(position: Int): Fragment {
        TODO("Not yet implemented")
    }
}

目前為止還是可以感覺到跟 RecyclerView 的 Adapter 很相似。

• getItemCount() 回傳總頁數
• createFragment 是每一頁要執行的事，那這裡因為是要裝入 fragment 所以就在裡面回傳一個 fragment 即可，fragment 會在底下完成。

根據上述的功能，填入需求後，完成以下的方法。

class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 5
    //共 5 頁
    
    override fun createFragment(position: Int): Fragment {
        return ViewPagerFragment(position)
    }
}

Fragment

這是前面的 ViewPagerFragment()。

在 fragment 的 alyout 裡面就放一個 text view 顯示在第幾頁而已

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textNumber"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="100sp"
        android:text="0"
        android:gravity="center"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在這裡我用建構元把 position 丟入 fragment，讓他自己也能知道自己是第幾頁，再把頁數顯示在這個 text view 上。

不過，要記得：fragment 一定要有一個沒有參數的建構元，所以我的建構元是另外寫在底下。

class ViewPagerFragment(): Fragment() {

    private var position: Int = 0
    
    constructor(position: Int) : this() {
        this.position = position
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val root = inflater.inflate(R.layout.fragment_pager, container, false)

        val textNumber: TextView = root.findViewById(R.id.textNumber)
        textNumber.text = (position + 1).toString()

        return root
    }
}

view pager 的 position 是從零開始的，所以在顯示上，我把 position 加上 1。

使用

有了 adapter 以後，就可以來 activity 做使用了。這樣就完成囉

class ViewPagerActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pager)

        val viewPager = findViewById<ViewPager2>(R.id.pagerMain)
        val viewPagerAdapter = ViewPagerAdapter(this)
        viewPager.adapter = viewPagerAdapter

    }
}